<template>
  <div class="root">
    <el-tabs v-model="formInline.status" @tab-click="selectProductByParams">
      <el-tab-pane label="全部" name=" "></el-tab-pane>
      <el-tab-pane label="审核通过" name="1"></el-tab-pane>
      <el-tab-pane label="审核中" name="0"></el-tab-pane>
      <el-tab-pane label="审核拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="auto"
      >
      <div style="display: flex;justify-content: space-between;">
      <div style="width: 70%;">
        <el-form-item label="商品标题">
          <el-input
            v-model="formInline.goodsName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品货号">
          <el-input
            v-model="formInline.productCode"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </div>
      <el-form-item label="" class="newFormItem">
          <div class="btnBoxs">
            <div class="resetBtn" @click="chongzhi">
              <i class="el-icon-refresh-right"></i>
              重置
            </div>
            <div class="queryBtn" @click="selectProductByParams">
              <i class="el-icon-search"></i>
              查询
            </div>
          </div>
        </el-form-item>
      </div>
       
        <!-- <el-form-item label="商品分类">
          <el-cascader
            @change="getCat"
            v-model="categoryId"
            :options="options"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
          ></el-cascader>
        </el-form-item> -->
       
        <!-- <el-form-item label="发布时间" class="timeBox">
          <el-date-picker
            @change="timeOne"
            value-format="yyyy-MM-dd"
            v-model="createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最后修改时间" class="timeBox">
          <el-date-picker
            @change="timeTow"
            value-format="yyyy-MM-dd"
            v-model="updateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图片包状态">
          <el-select v-model="formInline.picturePackFlag">
            <el-option label="已上传" value="1"></el-option>
            <el-option label="未上传" value="0"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px">
      <div class="tableBox">
        <el-table
          :data="tableData"
          header-cell-class-name="tableHeader"
          style="width: 100%"
          height="51vh"
        >
          <el-table-column prop="date" label="商品图片/标题" width="300" fixed >
            <template slot-scope="scope">
              <div class="shopsData"  @click="$router.push({
                path:'/detail',
                query:{
                  id:scope.row.id
                }
              })">
                <img :src="scope.row.pictureOriginal" class="newImg" alt="" />
                <div class="shopsDataBox">
                  <div class="nameBox">{{ scope.row.goodsName }}</div>
                  <div class="Model">{{ scope.row.specification }}</div>
                  <div class="Model">
                    {{ scope.row.productColorNumber }}色
                    {{ scope.row.productYardNumber }}码
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" width="200">
            <template slot-scope="scope">
              <div class="shopsDataBox">
                <div class="Model">商品价格：{{ scope.row.price }}</div>
                <div class="Model">清仓价格：{{ scope.row.specialPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="商品数据" width="260">
            <template slot-scope="scope">
              <div class="shopsDataBox">
                <div class="Model">报名数量：{{ scope.row.specialSock }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="创建时间" width="260">
            <template slot-scope="scope">
              <div class="shopsDataBox">
                <div class="Model">首次发布：{{ scope.row.createTime }}</div>
                <div class="Model">最后修改：{{ scope.row.updateTime }}</div>
              </div>
            </template>
          </el-table-column>
       
          <!-- <el-table-column prop="address" label="状态" width="260">
            <template slot-scope="scope">
              {{
                scope.row.specialStatus == 0
                  ? "审核中"
                  : scope.row.specialStatus == 1
                  ? "审核通过"
                  : "审核拒绝"
              }}
            </template>
          </el-table-column> -->
          <el-table-column prop="auditMessage" label="拒绝原因" width="200" >
           
          </el-table-column>
          <el-table-column prop="address" label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="
                  $router.push({
                    path: '/CommodityCategory',
                    query: {
                      id: scope.row.id,
                    },
                  })
                "
                >编辑商品</el-button
              >
              <el-popconfirm
                title="确定要删除该商品吗？"
                @confirm="pmsProduct(scope.row.id)"
              >
                <template slot="reference">
                  <el-button type="text" style="margin-left: 10px"
                    >删除商品</el-button
                  >
                </template>
              </el-popconfirm>
              <br />
              <el-popconfirm
                title="
                确定要下架该商品吗？
                "
                @confirm="updateProductMarket(scope.row.id)"
              >
                <template slot="reference">
                  <el-button type="text">下架商品</el-button>
                </template>
              </el-popconfirm>

              <el-button
              style="margin-right: 10px"
                v-if="scope.row.specialStatus == 2"
                type="text"
                @click="getQc(scope.row)"
                >再次申请</el-button
              >
              <el-popconfirm
                title="确定要退出清仓吗？"
                @confirm="deleteSpecialProduct(scope.row)"
              >
                <template slot="reference">
                  <el-button type="text" style="margin-left: 10px" 
                    >退出清仓</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="排序" width="160" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.$index !== 0 || formInline.pageNumber !== 1"
                type="text"
                @click="updateProductOrder(scope.row.specialId, 'bestUp')"
                >置顶</el-button
              >

              <el-button
                v-if="
                  formInline.pageNumber !== pages ||
                  scope.$index !== tableData.length - 1 ||
                  formInline.pageNumber !== pages
                "
                type="text"
                @click="updateProductOrder(scope.row.specialId, 'bestDown')"
                >置底</el-button
              >
              <br />
              <el-button
                v-if="scope.$index !== 0 || formInline.pageNumber !== 1"
                type="text"
                @click="updateProductOrder(scope.row.specialId, 'up')"
                >上移</el-button
              >
              <el-button
                v-if="
                  formInline.pageNumber !== pages ||
                  scope.$index !== tableData.length - 1 ||
                  formInline.pageNumber !== pages
                "
                type="text"
                @click="updateProductOrder(scope.row.specialId, 'down')"
                >下移</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagingBox">
        <PaginationView :total="total" @change="getPage"></PaginationView>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">清仓报名</div>
        <div class="chahao" @click="dialogVisible = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 10px">
        <el-form ref="form" :model="form" label-width="auto">
          <el-form-item label="单件价：">
            <el-input v-model="form.price" placeholder="清仓价应小于40">
              <i
                slot="suffix"
                style="
                  font-style: normal;
                  margin-right: 10px;
                  line-height: 30px;
                  color: #1e1e1e;
                "
                >元</i
              >
            </el-input>
          </el-form-item>
          <el-form-item label="库存：">
            <el-input v-model="form.num">
              <i
                slot="suffix"
                style="
                  font-style: normal;
                  margin-right: 10px;
                  line-height: 30px;
                  color: #1e1e1e;
                "
                >件</i
              >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="saveSpecialProduct(1)">
          确定</el-button
        >
        <el-button @click="dialogVisible = false"> 取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getListAndAccount } from "@/api/home/index";
import {
  selectProductByParams,
  pmsProduct,
  deleteSpecialProduct,
  saveSpecialProduct,
  updateProductOrder,
  updateProductMarket,
  
} from "@/api/seller/cangpushop";
export default {
  data() {
    return {
      shopRow:{},
      dialogVisible:false,
      total: null,
      activeName: true,
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        goodsName: "",
        productCode: "",
        categoryId: "",
        createTime: "",
        updateTime: "",
        picturePackFlag: "",
        type: 1,
        status: " ",
        isStore: 1,
      },
      tableData: [],
      options: [],
      createTime: "",
      updateTime: "",
      categoryId: [],
      form:{},
      productId:null,
      pages: null,
    };
  },
  created() {
    this.getListAndAccount();
    this.selectProductByParams();
  },
  methods: {
      //上架下架
      updateProductMarket(id) {
      updateProductMarket({
        ids: id,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.selectProductByParams();
        }
      });
    },
      //商品排序
      updateProductOrder(id, type) {
      updateProductOrder({
        id: id,
        type: type,
        productType:1
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.selectProductByParams();
        }
      });
    },
      //清仓报名
      getQc(row) {
      this.productId = row.id;
      this.shopRow=row
      this.dialogVisible = true;
    },
     //报名
     saveSpecialProduct(type) {
      if (this.form.price * 1 > 40) {
        this.$message({
          message: "清仓价应小于40",
          type: "warning",
        });
        return false;
      }
      if (this.form.price * 1 > this.shopRow.price) {
        this.$message({
          message: "清仓价应小于商品价格",
          type: "warning",
        });
        return false;
      }
      let params = {
        productId: this.productId,
        productPrice: this.form.price * 1,
        productStock: this.form.num * 1,
        type: type,
      };
      saveSpecialProduct(params).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "报名成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.selectProductByParams();
        }
      });
    },
    getPage(val) {
      this.formInline.pageNumber = val.currentPage;
      this.formInline.pageSize = val.limit;
      this.selectProductByParams();
    },
    //退出清仓
    deleteSpecialProduct(row) {
      deleteSpecialProduct({
        productId: row.id,
        type: 1,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "退出成功",
            type: "success",
          });
          this.selectProductByParams();
        }
      });
    },
    getCat() {
      this.formInline.categoryId = this.categoryId[this.categoryId.length - 1];
    },
    //重置
    chongzhi() {
      this.formInline = {
        pageNumber: 1,
        pageSize: 10,
        goodsName: "",
        productCode: "",
        categoryId: "",
        createTime: "",
        updateTime: "",
        picturePackFlag: "",
        type: 1,
        status: " ",
        isStore: 1,
      };
      this.selectProductByParams();
    },
    //删除商品
    pmsProduct(id) {
      pmsProduct({
        idList: `${id}`,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.selectProductByParams();
        }
      });
    },
    //获取发布时间
    timeOne(val) {
      this.formInline.createTime = val.join("_");
      console.log(this.formInline.createTime);
    },
    //获取修改时间
    timeTow(val) {
      this.formInline.updateTime = val.join("_");
    },
    //获取列表
    selectProductByParams() {
      selectProductByParams(this.formInline).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
        this.pages = data.data.pages;
      });
    },
    //获取商品分类
    getListAndAccount() {
      getListAndAccount().then((data) => {
        data.data.forEach((item) => {
          if (!item.children.length) {
            item.children = undefined;
          } else {
            item.children.forEach((item1) => {
              if (!item1.children.length) {
                item1.children = undefined;
              } else {
                item1.children.forEach((item2) => {
                  if (!item2.children.length) {
                    item2.children = undefined;
                  }
                });
              }
            });
          }
        });
        this.options = data.data;
      });
    },
  },
  watch:{
    dialogVisible(){
      if(!this.dialogVisible){
        this.form={}
      }
    },
  }
};
</script>
  
  <style scoped lang="scss">
.root {
  font-size: 12px;
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  /deep/ .el-input__inner {
    border: none;
    background-color: #f5f7f9;
  }
  /deep/ .el-range-input {
    background-color: #f5f7f9;
  }
  /deep/ .el-form-item {
    background: #f5f7f9;
    padding: 0 10px;
    border-radius: 2px;
    margin-right: 40px;
    width: 23%;
  }
  /deep/ .newFormItem {
    background: #fff;
    width: 15%;
  }
  .btnBoxs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .resetBtn {
      width: 5vw;
      border-radius: 2px;
      text-align: center;
      color: #666;
      font-size: 0.7vw;
      background-color: #f5f7f9;
    }
    .queryBtn {
      border-radius: 2px;
      text-align: center;
      width: 5vw;
      color: #fff;
      font-size: 0.7vw;
      background: #e22a1f;
      margin-left: 20px;
    }
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  /deep/ .el-input__suffix {
    right: -60px;
  }
  .tableBox {
    /deep/ .tableHeader {
      background: #ebeff5;
      font-weight: 400;
      color: #000;
    }
    .shopsData {
      display: flex;
      cursor:pointer;
      .newImg {
        width: 80px;
        height: 80px;
        border-radius: 10px;
      }
      .shopsDataBox {
        margin-left: 10px;
        .nameBox {
          font-size: 14px;
        }
        .Model {
          color: #999999;
          margin-top: 8px;
          font-size: 12px;
        }
      }
    }
    .lvBox {
      color: #07c160;
    }
    .hongBox {
      color: #e22a1f;
    }
  }
  .pagingBox {
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .form {
      .btnBoxB {
        border: 0.01rem solid #e22a1f;
        font-size: 0.16rem;
        color: #e22a1f;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-left: 0.1rem;
        cursor: pointer;
      }
      /deep/.el-input__suffix {
        right: 5px;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
      }
      /deep/ .el-cascader {
        width: 100%;
      }
      .bitS {
        display: flex;
      }
      .leftBtn {
        width: 1rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #e22a1f;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        text-align: center;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .rightBtn {
        background: #fff;
        color: #e22a1f;
        border: 0.01rem solid #e22a1f;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
  .el-form-item {
    width: auto;
    // background: #fff;
  }
}
</style>
  <style scoped lang="scss">
@media screen and (max-width: 1500px) {
  /deep/ .el-form-item__content {
    width: 57%;
  }
  .root {
    font-size: 12px;
    /deep/ .el-tabs__item.is-active {
      color: #e22a1f;
    }
    /deep/ .el-tabs__active-bar {
      background-color: #e22a1f;
    }
    /deep/ .el-tabs__item:hover {
      color: #e22a1f;
    }
    /deep/ .el-input__inner {
      border: none;
      background-color: #f5f7f9;
    }
    /deep/ .el-range-input {
      background-color: #f5f7f9;
    }
    /deep/ .el-form-item {
      background: #f5f7f9;
      padding: 0 10px;
      border-radius: 2px;
      margin-right: 40px;
      width: 19%;
    }
    /deep/ .newFormItem {
      background: #fff;
      width: 21%;
      margin-right: 0;
      .el-form-item__content{
        width: 100%;
      }
    }
    /deep/ .timeBox {
      width: 40%;
    }
    .btnBoxs {
      display: flex;
      justify-content: center;
      cursor: pointer;
      .resetBtn {
        width: 7vw;
        border-radius: 2px;
        text-align: center;
        color: #666;
        font-size: 1vw;
        background-color: #f5f7f9;
      }
      .queryBtn {
        border-radius: 2px;
        text-align: center;
        width: 7vw;
        color: #fff;
        font-size: 1vw;
        background: #e22a1f;
        margin-left: 20px;
      }
    }
    /deep/ .el-date-editor--daterange.el-input__inner {
      width: 250px;
    }
    /deep/ .el-input__suffix {
      right: -10px;
    }
    /deep/ .el-range-input{
      margin-top: 12px;
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>